<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1
			{
				border: 0px solid salmon;
				width: 600px;
				margin: 0 auto;
			}
			#div2{
				border: 1px solid seagreen;
				width: 500px;
				margin-top: 30px;
			}
			
		</style>
		<script type="text/javascript">
			function dela()
			{
				
					var tr=this.parentNode.parentNode;
				    var name=tr.getElementsByTagName("td")[0].innerHTML;   //tr.get(td)  //获取具体的td它的tr里的第一个td
					 name=tr.children[0].innerHTML;
					var a= confirm("确认删除"+name+"吗");
					if(a)
					 {
										
							 tr.parentNode.removeChild(tr);
					}
							return false;  //取消默认行为跳转
			}
		   window.onload=function()
		   {
			   var alla=document.getElementsByTagName("a");
			   
			   for(var i=0;i<alla.length;i++)
			   {
				   
				   alla[i].onclick=dela;   //点击哪个超链接，this就是谁  绑定
				  
			   }
			   
			   var tj=document.getElementById("btn01");
			   btn01.onclick=function()
			   {
				   
				   var name=document.getElementById("name").value;
				   var email=document.getElementById("email").value;
				   var salary=document.getElementById("salary").value;
				   var tr=document.createElement("tr");
				   var nametd=document.createElement("td");
				   var emailtd=document.createElement("td");
				   var salarytd=document.createElement("td");
				   var atd=document.createElement("td");
				   var a=document.createElement("a");
				   var nameText=document.createTextNode(name);
				   var emailText=document.createTextNode(email);
				   var salaryText=document.createTextNode(salary);
				   var deleteText=document.createTextNode("Delete");
				   nametd.appendChild(nameText);
				   emailtd.appendChild(emailText);
				   salarytd.appendChild(salaryText);
				   a.appendChild(deleteText);
				   //向a中添加属性
				   a.href="javascript:;";     //加这个有什么不同呢
				   //为新添加的a绑定一次单击响应函数
				   a.onclick=dela;
				  
		
				
				   atd.appendChild(a);
				   tr.appendChild(nametd);
				   tr.appendChild(emailtd);
				   tr.appendChild(salarytd);
				   tr.appendChild(atd);
				   var table=document.getElementById("table1");
				   var tbody= table.getElementsByTagName("tbody")[0];        //查找table里的tbody标签
				   tbody.appendChild(tr);
			   }
		   }
		</script>
	</head>
	<body>
		<a href="">w d </a>
		<div id="div1">
		<table id="table1" width="500" border="1px" cellspacing="0px" cellpadding="0px">
		<tr>
			<td>Name</td>
		    <td>Email</td>
		    <td>Salary</td>
		    <td></td>
		</tr>
		<tr>
			<td>林润钿</td>
		    <td>distance_1819@qq.com</td>
		    <td>50000</td>
		    <td><a href="javascript:;">Delete</a></td>
		</tr>
		<tr>
			<td>戴阳</td>
		    <td>861581056@qq.com</td>
		    <td>50000</td>
		    <td><a href="javascript:;">Delete</a></td>
		</tr>
		<tr>
			<td>张恩博</td>
		    <td>3500145369</td>
		    <td>50000</td>
		    <td><a href="javascript:;">Delete</a></td>
		</tr>
		</table>
		
		<div id="div2">
			<h1>添加新员工</h1>
			<p>name:<input type="text" id="name" value="请输入名字"/> </p> 
			<p>email：<input type="text" id="email" value="请输入邮箱"/></p>
			<p>salary：<input type="text" id="salary" value="请输入工资"/></p>
			<p><input type="button" value="提交" id="btn01"></p>
		</div>
		</div>
	</body>
</html>